<template>
  <div class="tag">
    <el-card class="search">
      <el-form ref="searchForm" :model="searchForm" inline>
        <el-form-item label="标签名称" prop="name">
          <el-input v-model.trim="searchForm.name" placeholder="标签名称" class="input" clearable />
        </el-form-item>

        <el-form-item label="标签状态" prop="status">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="隐藏" value="0" />
            <el-option label="正常" value="1" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button size="medium" @click="searchTag">搜索</el-button>
          <!-- <el-button type="primary" size="medium">重置</el-button> -->
          <el-button type="primary" size="medium" @click="$router.push('/tag/create')">新增标签</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="content">
      <el-table :data="list" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column label="序号" width="80" align="center" type="index"></el-table-column>
        <el-table-column label="分类名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center">
          <template slot-scope="scope">
            {{ scope.row.sort }}
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusFilter">{{scope.row.status | statusFilterText}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="editTag(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteTag(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

  </div>
</template>

<script>
export default {
  name: 'Tag',
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: 'danger',
        1: 'success',
      }
      return statusMap[status]
    },
    statusFilterText(status) {
      const statusMap = {
        0: '隐藏',
        1: '正常',
      }
      return statusMap[status]
    },
  },
  data() {
    return {
      list: [],
      searchForm: {
        name: '',
        status: ''
      },
    }
  },
  created() {
    this.getTagList()
  },
  methods: {
    // 获取标签
    getTagList() {
      this.$api.httpTagList().then((res) => {
        if (res.code === 200) {
          this.list = res.data || []
        }
      })
    },
    // 搜索标签
    searchTag() { 
      const params = {
        key:this.searchForm.name,
        status:this.searchForm.status
      }
      this.$api.httpTagSearch(params).then((res) => {
        if (res.code === 200) {
          this.list = res.data || []
        }
      })
    },
    // 编辑标签
    editTag(query) {
      this.$router.push({ path: '/tag/edit/', query })
    },
    // 删除标签
    deleteTag(id) {
      this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$api.httpTagDetele(id).then((res) => {
          if (res.code === 200) {
            this.getTagList()
            this.$message.success('删除成功')
          }
        })
      })
      .catch(() => {
        this.$message.info('已取消删除')
      })
    },
  },
}
</script>

<style scoped lang="scss">
.tag {
  .search {
    margin-bottom: 14px;
  }
}
</style>
